<template>
  <div class="wrap">
    <div class="search">
      <div class="search-btn" @click="search">
        <i-icon class="i-icon" size="22" type="search" />
        <span> 搜索商品</span>
      </div>
    </div>
    <div class="goods">
      <scroll-view scroll-y="true" class="left">
        <div @click="changeMenu(item)" :key="item.id" v-for="item in menuList">
          <span :class="[meunIndex==item.id?'active':'']">{{item.name}}</span>
        </div>
      </scroll-view>
      <scroll-view scroll-y="true" class="rigth">
        <div class="content">
          <img class="banner" mode="widthFix" :src="banner">
          <i-divider size="10"  color="#b4282d" lineColor="#bbb">{{frontName}}</i-divider>
          <ul class="list">
            <li :key="index" v-for="(item,index) in currentCategory" @click="more(item)">
              <img mode="widthFix" :src="item.wap_banner_url">
              <h1>{{item.name}}</h1>
            </li>
          </ul>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import {get} from '@/utils'

export default {
  data () {
    return {
      menuList: [],
      meunIndex: 0,
      banner: '',
      frontName: '',
      currentCategory: []
    }
  },
  methods: {
    async changeMenu (item) {
      const res = await get('/weapp/category/currentCategory', {
        id: item.id
      })
      this.currentCategory = res.currentCategory
      this.meunIndex = item.id
      this.banner = item.banner_url
      this.frontName = item.front_name
    },
    async getMenu () {
      const res = await get('/weapp/category/menuList')
      this.menuList = res.menuList
      this.banner = res.menuList[0].banner_url
      this.meunIndex = res.menuList[0].id
      this.frontName = res.menuList[0].front_name
      this.changeMenu(res.menuList[0])
    },
    search () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    more (current) {
      let name = this.menuList.filter((item) => {
        return item.id === current.parent_id
      })[0].name
      wx.navigateTo({
        url: `/pages/allGoods/main?id=${current.parent_id}&name=${name}&currentId=${current.id}`
      })
    }
  },
  mounted () {
    this.getMenu()
  }
}
</script>

<style lang="less" scoped>
.wrap{
  height: 100%;
}
.search{
  height: 77rpx;
  padding: 15rpx;
  background: #fff;
  border-bottom: 1px solid #ededed;
  .search-btn{
    border-radius: 10rpx;
    height: 77rpx;
    background: #ededed;
    text-align: center;
    line-height: 77rpx;
    vertical-align: top;
  }
  .i-icon{
    vertical-align: top;
  }
}
.goods{
  display: flex;
  height: 100%;
  width: 100%;
  background: #fff;
  .left{
    flex: 0 0 180rpx;
    height: 100%;
    white-space: nowrap;
    div{
      padding-top: 20rpx;
      
      span{
        display: block;
        box-sizing: border-box;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 30rpx;
        vertical-align: bottom;
      }
    }
  }
  .rigth{
    flex: 1;
    border-left:1px solid #b7b7b7;
    height: 100%;
    white-space: nowrap;
    .content{
      padding: 20rpx;
      .banner{
        width: 100%;
      }
      .list{
        display: flex;
        flex-wrap: wrap;
        li{
          width: 33.3%;
          border-right: 10rpx solid #fff;
          box-sizing: border-box;
          img{
            width: 100%;
          }
          h1{
            text-align: center;
          }
        }
        li:nth-of-type(3n){
          border-right: none;
        }
      }
    }
  }
}
.active{
  color: #b4282d;
  font-size: 38rpx !important;
  border-left: 6rpx solid #b4282d;
}
</style>
